:root {
    --comment-rating-star-color: #343434;
}

.wprm-comment-rating {
    svg {
        path {
            fill: var(--comment-rating-star-color);
        }
        polygon {
            stroke: var(--comment-rating-star-color);
        }
    }

    .wprm-rating-star-full svg path {
        stroke: var(--comment-rating-star-color);
        fill: var(--comment-rating-star-color);
    }
    .wprm-rating-star-empty svg path {
        stroke: var(--comment-rating-star-color);
        fill: none;
    }
}

.wprm-comment-ratings-container svg .wprm-star-full {
    fill: var(--comment-rating-star-color);
}
.wprm-comment-ratings-container svg .wprm-star-empty {
    stroke: var(--comment-rating-star-color);
}

body:not(:hover) fieldset.wprm-comment-ratings-container:focus-within span {
    outline: 1px solid #4D90FE;
}

.comment-form-wprm-rating {
    text-align: left;
	margin-top: 5px;
    margin-bottom: 20px;

    .wprm-rating-stars {
        display: inline-block;
        vertical-align: middle;
    }
}

// Source: https://codepen.io/thierry/pen/wyYZoe.
fieldset.wprm-comment-ratings-container {
    position: relative;
    display: inline-block; 
    padding: 0;
    margin: 0;
    border: 0;
    background: none;

    legend {
        position: absolute;
        opacity: 0;
        left: 0;
    }

    br {
        display: none;
    }

    input[type=radio] {
        float: left;
        margin: 0 !important;
        padding: 0 !important;
        width: 16px;
        height: 16px;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        border: 0;
        cursor: pointer;

        &:first-child {
            margin-left: -16px;
        }
    }
    span {
        position: absolute;
        pointer-events: none;
        width: 80px;
        height: 16px;
        top: 0;
        left: 0;
        opacity: 0;
        font-size: 0;

        svg {
            width: 100% !important;
            height: 100% !important;
        }
    }
    
    input:checked + span,
    input:hover + span {
        opacity: 1;
    }
    
    input:hover + span ~ span {
        display: none;
    }
}

.rtl {
    .comment-form-wprm-rating {
        text-align: right;
    }

    img.wprm-comment-rating {
        transform: scale(-1,1);
    }

    fieldset.wprm-comment-ratings-container {
        span {
            left: inherit;
            right: 0;

            svg {
                transform: scale(-1,1);
            }
        }
    }
}